<template>
  <div id="app">
    <loading v-show="isLoading"></loading>
    <!---->
    <div data-v-63778285="" class="app">
      <div data-v-4c7ea7b1="" data-v-63778285="" class="index-wrap">
        <div data-v-4c7ea7b1="" class="header">
          <div data-v-4c7ea7b1="" class="header--background">
            <div data-v-4c7ea7b1="" class="header__tabs--category-channel van-tabs van-tabs--line"
              active-color="#E62525" inactive-color="#656565">
              <div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
                <div class="van-tabs__nav van-tabs__nav--line" ref="cc">
                  <div class="van-tabs__line" style="width: 24px; transform: translateX(6vw); transition-duration: 0.3s;"></div>
                  <div :class="getTabClass(i)" v-for="(vanItem, i) in vanTabs" :key="vanItem.activityTagName" @click="showTabs(i)">
                    <span class="van-ellipsis">{{vanItem.activityTagName}}</span>
                  </div>
                </div>
              </div>
              <div class="van-search">
                <div class="search-input">
                  <form @submit.prevent>
                    <i @click="searchGoods"></i>
                    <input v-model="txt" id="search" ref="searchInput" type="serch" @keyup.enter="searchGoods" placeholder="搜索商品款号、序号、关键字" />
                    <div class="brand_topic">
                      <a href="https://mall.xiangtuan.xyz/api/member/auth?backUrl=https%3A%2F%2Fmall.xiangtuan.xyz%2F%23%2FbrandList%3FshopId%3Dti7BNtxVjZ">
                        <!-- <button @click="searchGoods">搜索</button> -->
                        <i></i>
                        <p>品牌</p>
                      </a>
                    </div>
                  </form>
                </div>
              </div>
              <div class="van-tabs__content">
                <div data-v-4c7ea7b1="" class="van-tab__pane">
                  <tab-content v-if="tabData"
                    ref="tabContent"
                    :tabData="tabData"
                    :activeTab="activeTab"
                    @loadingStatus="getLoadingStatus"
                    @reload='reloadData'
                    :searchTxt='searchTxt'>
                  </tab-content>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!---->
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import tabContent from './tabContent'
  import loading from './loading'
  import axios from 'axios'
  let localTabData = require('../../../../mock/tabData.json')

  export default {
    name: 'login',
    components: {
      tabContent,
      loading
    },

    data () {
      return {
        vanTabs: [],
        isLoading: false,
        activeTab: 0, // 当前tab
        tabData: [], // 栏目名称
        txt: '',
        searchTxt: ''
      }
    },
    computed: {
      hasMask () {
        return this.isLock
      }
    },

    async created () {
      await this.getTabName()
    },

    methods: {
      getLoadingStatus (val) {
        this.isLoading = val
      },
      getTabClass (pos) {
        return pos !== this.activeTab ? `van-tab van-tab${pos}` : `van-tab van-tab--active van-tab${pos}`
      },
      // 切换tab，滚动滑条
      showTabs (pos = 0) {
        this.txt = ''
        let leftWidth = 0
        for (let i = 0; i <= pos; i++) {
          leftWidth += $('.van-tabs__nav .van-tab').eq(i).outerWidth()
        }
        let rangeWidth = leftWidth - $('.van-tabs__nav .van-tab').eq(pos).outerWidth() / 2 - 12
        $('.van-tabs__line').css({'transform': 'translateX(' + rangeWidth + 'px)'})

        this.activeTab = pos
        this.tabData = this.vanTabs[pos]

        this.isLoading = true
      },
      reloadData () {
        this.tabData = []
        let that = this
        setTimeout(() => {
          that.showTabs(0)
        }, 100)
        this.txt = ''
      },
      /**
       * 当栏目/栏目内容请求数据失败的时候，读取本地存取的死数据，以正常显示页面
       */
      // 读取栏目数据
      getTabName () {
        axios.post('https://mall.xiangtuan.xyz/api/commodity/subscribe/queryActivityTag/ti7BNtxVjZ')
          .then(res => {
            let datas = res.data && res.data.data
            this.vanTabs = datas || localTabData.data
            this.showTabs(0)
            this.tabData = this.vanTabs[0]
            this.isLock = false
          })
      },
      searchGoods () {
        console.log(this.txt)
        this.searchTxt = this.txt
      }
    },

    mounted () {
      this.$nextTick(() => {
      })
    }
  }
</script>

<style lang='less' scoped>
  .van-search {
    .search-input {
      padding: 4vw 2vw 4vw 6vw;
      box-sizing: border-box;
      form {
        display: flex;
        position: relative;
        left: 0;
        top: 0;
        & > i {
          display: block;
          width: 12vw;
          height: 10vw;
          position: absolute;
          left: 0;
          top: 0;
          background: url(../../../../static/images/aikucun_icon.png) no-repeat 4vw center;
          background-size: 15vw;
        }
        input {
          box-sizing: border-box;
          flex: 5;
          height: 10vw;
          padding: 0 2vw 0 12vw;
          font-size: 4vw;
          border: 1px solid #999;
          border-radius: 10vw;
        }
        div {
          flex: 1;
          position: relative;
          left: 0;
          top: 0;
          text-align: center;
          padding: 0 2vw;
          box-sizing: border-box;
          a > i {
            display: block;
            width: 8vw;
            height: 6vw;
            position: absolute;
            left: 4vw;
            top: 0;
            background: url(../../../../static/images/aikucun_icon.png) no-repeat -7.5vw center;
            background-size: 15vw;
          }
          button {
            width: 80%;
            margin: 0 20%;
            display: block;
            background: #fff;
            border: none;
            height: 10vw;
            border-radius: 4px;
            font-size: 3vw;
          }
          p {
            font-size: 3.5vw;
            padding-top: 6vw;
          }
        }
      }
    }
  }
</style>
